<template>
    <div class="chart-container">
        <div id="trade-view" style="width: 100%; height: 600rpx; margin-top: 20rpx;"></div>
    </div>
</template>

<script>
import * as lwc from 'lightweight-charts';
const { createChart } = lwc;

export default {
    data() {
        return {
            chart: null,
            candlestickSeries: null,
            areaSeries: null,
            interval: '1D',
            locale: null,
            isTimeChartMode: false
        }
    },

    props: {
        topTimeSeries: { type: String, default: '#0D0D0F' },
        bottomTimeSeries: { type: String, default: '#0848FF' },
        lineTimeSeries: { type: String, default: '#838588' },
        bgColor: { type: String, default: '#0D0D0F' },
        textColor: { type: String, default: '#A4A8AB' },
        gridColor: { type: String, default: '#2a2a3d' },
        idtemp: { type: String, required: true },
        toolbarBgColor: { type: String },
        priceChartHeight: String,
        priceChartWidth: String,
        decimal: String,
        klineData: { type: Array, default: () => [] },
        chartType: { type: String, default: 'candle' }, // 接收父组件传递的图表类型
        timeInterval: { type: String, default: '1m' } // 接收父组件传递的时间周期
    },

    mounted() {
        console.log('[Trade组件] 组件已挂载');
        // 组件挂载后初始化图表
        if (this.klineData && this.klineData.length > 0) {
            this.$nextTick(() => {
                this.init(this.idtemp, 'day', { value: 'zh' });
            });
        }
    },

    updated() {
        console.log('[Trade组件] 组件已更新');
    },

    methods: {
        
        init(symbol, interval, locale) {



            this.locale = locale || { value: 'zh' };
            this.interval = interval;

            if (this.chart) {

                return;
            }

            try {
                const container = document.getElementById('trade-view');
                if (!container) {
                    console.log('[Trade组件] 未找到容器元素');
                    return;
                }

                console.log('[Trade组件] 开始创建图表');
                this.chart = createChart(container, {
                    width: container.clientWidth || 390,
                    height: container.clientHeight || 350,
                    layout: {
                        textColor: '#1f1f1f',
                        background: { color: '#ffffff' },
                        fontSize: 8,  // 减小字体大小
                        fontFamily: 'Arial, sans-serif',
                    },
                    timeScale: {
                        timeVisible: true,
                        secondsVisible: false,
                        barSpacing: 8,
                        minBarSpacing: 0.5,
                        timezone: 'Asia/Shanghai',
                        tickMarkFormatter: (time, tickMarkType, locale) => {
                            const date = new Date(time * 1000);
                            const hours = date.getHours().toString().padStart(2, '0');
                            const minutes = date.getMinutes().toString().padStart(2, '0');
                            const month = (date.getMonth() + 1).toString().padStart(2, '0');
                            const day = date.getDate().toString().padStart(2, '0');
                            
                            // 根据刻度类型返回不同的格式
                            if (tickMarkType === 0) { // 年
                                return date.getFullYear().toString();
                            } else if (tickMarkType === 1) { // 月
                                return month + '-' + day;
                            } else if (tickMarkType === 2) { // 日
                                return month + '-' + day;
                            } else { // 小时或分钟
                                return hours + ':' + minutes;
                            }
                        }
                    },
                });
               



                // 在图表创建后，手动应用时间格式化器
                const timeScale = this.chart.timeScale();
                if (timeScale && typeof timeScale.applyOptions === 'function') {
                    timeScale.applyOptions({
                        timeVisible: true,
                        secondsVisible: false,
                    });

                }
                const chartMethods = Object.getOwnPropertyNames(Object.getPrototypeOf(this.chart));
                try {

                    this.candlestickSeries = this.chart.addSeries(lwc.CandlestickSeries, {
                        upColor: '#00aa00',        // 绿色 - 上涨
                        downColor: '#ff4444',      // 红色 - 下跌
                        borderUpColor: '#00aa00',
                        borderDownColor: '#ff4444',
                        wickUpColor: '#00aa00',
                        wickDownColor: '#ff4444',
                        borderVisible: true,
                        wickVisible: true,
                        priceLineVisible: true,    // 启用价格线
                        lastValueVisible: true,    // 显示最后一个价格
                        timezone: 'Asia/Shanghai',
                        priceFormat: {
                            type: 'price',
                            precision: 0,  // 不保留小数
                            minMove: 1,    // 最小变动单位
                        },
                    });
                    console.log('[Trade组件] 蜡烛图series创建成功:', this.candlestickSeries);

                } catch (e) {
                    console.log('[Trade组件] 蜡烛图series创建失败:', e);
                    this.candlestickSeries = null;
                }

                // 创建面积图 series
                try {

                    this.areaSeries = this.chart.addSeries(lwc.AreaSeries, {
                        lineColor: '#1f77d2',
                        topColor: 'rgba(31, 119, 210, 0.3)',
                        bottomColor: 'rgba(31, 119, 210, 0)',
                        priceLineVisible: true,    // 启用价格线
                        lastValueVisible: true,    // 显示最后一个价格
                        timezone: 'Asia/Shanghai',
                        priceFormat: {
                            type: 'price',
                            precision: 0,  // 不保留小数
                            minMove: 1,    // 最小变动单位
                        },
                    });
                    console.log('[Trade组件] 面积图series创建成功:', this.areaSeries);

                } catch (e) {
                    console.log('[Trade组件] 面积图series创建失败:', e);
                    this.areaSeries = null;
                }

                // Load data
                if (this.klineData && this.klineData.length > 0) {
                    this.updateChartData();
                }

                const ts = this.chart.timeScale();
                if (ts && typeof ts.fitContent === 'function') {
                    ts.fitContent();
                    
                    // 调整初始显示范围：只显示最新40%的数据
                    // 这样可以让蜡烛柱显示得更大
                    if (this.klineData && this.klineData.length > 0) {
                        try {
                            const totalBars = this.klineData.length;
                            const visibleBars = Math.max(30, Math.floor(totalBars * 0.4)); // 最少显示30条
                            const startIndex = Math.max(0, totalBars - visibleBars);
                            const startTime = Math.floor(this.klineData[startIndex].time / 1000);
                            const endTime = Math.floor(this.klineData[totalBars - 1].time / 1000);
                            
                            if (typeof ts.setVisibleRange === 'function') {
                                ts.setVisibleRange({
                                    from: startTime,
                                    to: endTime
                                });

                            }
                        } catch (e) {

                        }
                    }
                }

                // 监听十字线移动事件，实现点击K线时高亮显示Y轴价格
                this.chart.subscribeCrosshairMove((param) => {
                    if (!param || !param.time || !param.seriesData) {
                        return;
                    }

                    // 获取当前图表类型对应的series数据
                    let price = null;
                    
                    if (this.chartType === 'candle' && this.candlestickSeries) {
                        const candleData = param.seriesData.get(this.candlestickSeries);
                        if (candleData) {
                            // 蜡烛图使用close价格
                            price = candleData.close;
                        }
                    } else if (this.chartType === 'area' && this.areaSeries) {
                        const areaData = param.seriesData.get(this.areaSeries);
                        if (areaData) {
                            // 面积图使用value价格
                            price = areaData.value;
                        }
                    }

                    // 如果获取到价格，向父组件触发事件
                    if (price !== null && !isNaN(price)) {
                        this.$emit('price-highlight', price);
                    }
                });

                // 监听点击事件，实现点击K线时显示详细数据
                // 先检查方法是否存在，确保兼容性
                if (this.chart && typeof this.chart.subscribeClick === 'function') {
                    this.chart.subscribeClick((param) => {
                        if (!param || !param.time || !param.seriesData) {
                            return;
                        }

                        // 获取点击位置的时间和数据
                        const time = param.time;
                        let data = null;
                        
                        // 根据当前图表类型获取对应的数据
                        if (this.chartType === 'candle' && this.candlestickSeries) {
                            // 尝试多种方式获取数据
                            if (typeof param.seriesData.get === 'function') {
                                data = param.seriesData.get(this.candlestickSeries);
                            }
                            
                            // 如果get方法没有获取到数据，尝试遍历Map
                            if (!data) {
                                param.seriesData.forEach((value, key) => {
                                    // 比较对象引用
                                    if (key === this.candlestickSeries) {
                                        data = value;
                                    }
                                });
                            }
                        } else if (this.chartType === 'area' && this.areaSeries) {
                            // 尝试多种方式获取数据
                            if (typeof param.seriesData.get === 'function') {
                                data = param.seriesData.get(this.areaSeries);
                            }
                            
                            // 如果get方法没有获取到数据，尝试遍历Map
                            if (!data) {
                                param.seriesData.forEach((value, key) => {
                                    // 比较对象引用
                                    if (key === this.areaSeries) {
                                        data = value;
                                    }
                                });
                            }
                        }

                        // 如果获取到数据，向父组件触发事件
                        if (data) {
                            // 根据图表类型发送不同的数据
                            if (this.chartType === 'candle' && data.high !== undefined && data.low !== undefined) {
                                // 蜡烛图：发送最高价和最低价
                                this.$emit('kline-click', {
                                    type: 'candle',
                                    high: data.high,
                                    low: data.low,
                                    open: data.open,
                                    close: data.close,
                                    time: time
                                });
                            } else if (this.chartType === 'area' && data.value !== undefined) {
                                // 面积图：发送value值
                                this.$emit('kline-click', {
                                    type: 'area',
                                    value: data.value,
                                    time: time
                                });
                            }
                        } else {
                            // 尝试从K线数据中查找最接近的时间点数据
                            const targetTime = Math.floor(time);
                            const klineData = this.klineData;
                            if (klineData && klineData.length > 0) {
                                // 查找最接近的时间点
                                let closestData = null;
                                let minDiff = Infinity;
                                
                                for (let i = 0; i < klineData.length; i++) {
                                    const item = klineData[i];
                                    const itemTime = Math.floor(item.time / 1000);
                                    const diff = Math.abs(itemTime - targetTime);
                                    
                                    if (diff < minDiff) {
                                        minDiff = diff;
                                        closestData = item;
                                    }
                                }
                                
                                if (closestData && minDiff <= 60) { // 60秒以内认为是同一时间点
                                    // 根据图表类型发送不同的数据
                                    if (this.chartType === 'candle' && closestData.high !== undefined && closestData.low !== undefined) {
                                        // 蜡烛图：发送最高价和最低价
                                        this.$emit('kline-click', {
                                            type: 'candle',
                                            high: closestData.high,
                                            low: closestData.low,
                                            open: closestData.open,
                                            close: closestData.close,
                                            time: targetTime
                                        });
                                    } else if (this.chartType === 'area' && closestData.value !== undefined) {
                                        // 面积图：发送value值
                                        this.$emit('kline-click', {
                                            type: 'area',
                                            value: closestData.value,
                                            time: targetTime
                                        });
                                    }
                                }
                            }
                        }
                    });
                }

            } catch (error) {

            }
        },

        updateChartData() {
            if (!this.chart) {
                return;
            }

            try {
                const candleData = [];
                const areaData = [];
                const seenTimes = new Set(); // 跟踪已见过的时间戳

                // 从原始K线数据中同时准备两份数据
                this.klineData.forEach(item => {
                    const time = Math.floor(item.time / 1000);
                    
                    // 跳过重复的时间戳
                    if (seenTimes.has(time)) {
                        return;
                    }
                    seenTimes.add(time);
                    
                    // 数据格式处理：
                    // 如果数据有open/high/low/close字段，说明是蜡烛图格式
                    // 如果只有value字段，说明是面积图格式
                    let open, high, low, close;
                    
                    if (item.open !== undefined && item.high !== undefined && item.low !== undefined && item.close !== undefined) {
                        // 蜡烛图格式数据
                        open = parseFloat(item.open) || 0;
                        high = parseFloat(item.high) || 0;
                        low = parseFloat(item.low) || 0;
                        close = parseFloat(item.close) || 0;
                    } else if (item.value !== undefined) {
                        // 面积图格式数据，只能用于面积图
                        // 蜡烛图模式下跳过这种数据
                        const value = parseFloat(item.value) || 0;
                        
                        // 只为面积图准备数据
                        if (!isNaN(value)) {
                            areaData.push({
                                time: time,
                                value: value,
                            });
                        }
                        return; // 跳过蜡烛图数据准备
                    } else {
                        // 无效数据，跳过
                        return;
                    }
                    
                    if (!isNaN(open) && !isNaN(high) && !isNaN(low) && !isNaN(close)) {
                        // 准备蜡烛图数据
                        candleData.push({
                            time: time,
                            open: open,
                            high: high,
                            low: low,
                            close: close,
                        });

                        // 准备面积图数据（使用close价格作为value）
                        areaData.push({
                            time: time,
                            value: close,
                        });
                    }
                });

                // 按时间升序排列
                candleData.sort((a, b) => a.time - b.time);
                areaData.sort((a, b) => a.time - b.time);

                if (candleData.length > 0) {


                }

                // 根据chartType分别设置数据
                const isCandle = this.chartType === 'candle';
                const isArea = this.chartType === 'area' || this.chartType === 'line';
                
                if (isCandle) {
                    // 蜡烛图模式
                    if (this.candlestickSeries && candleData.length > 0) {
                        this.candlestickSeries.setData(candleData);

                    }
                    if (this.areaSeries) {
                        this.areaSeries.setData([]);

                    }
                } else if (isArea) {
                    // 面积图模式



                    if (areaData.length > 0) {


                    }
                    
                    // 先清空蜡烛图
                    if (this.candlestickSeries) {
                        this.candlestickSeries.setData([]);

                    }
                    
                    // 再设置面积图数据
                    if (this.areaSeries && areaData.length > 0) {
                        try {

                            this.areaSeries.setData(areaData);

                            // 立即刷新图表并调整Y轴
                            const ts = this.chart.timeScale();
                            if (ts && typeof ts.fitContent === 'function') {
                                ts.fitContent();

                            }
                            
                            // 额外调用applyOptions来确保Y轴正确缩放
                            try {
                                if (this.chart && typeof this.chart.applyOptions === 'function') {
                                    this.chart.applyOptions({
                                        timeScale: {
                                            rightOffset: 0,
                                            barSpacing: 12,
                                            minBarSpacing: 0.5,
                                        },
                                    });

                                }
                            } catch (e) {

                            }
                        } catch (e) {


                        }
                    } else {

                    }
                }

                // 只有在蜡烛图模式下才需要额外设置可见范围和调整Y轴
                // 面积图模式已经在上面设置数据后立即调用了fitContent
                if (isCandle) {
                    const ts = this.chart.timeScale();
                    if (ts) {

                        if (candleData && candleData.length > 0) {
                            // 使用fitContent自动适配可见范围和Y轴
                            if (typeof ts.fitContent === 'function') {
                                ts.fitContent();

                            }
                            
                            // 额外调用applyOptions来确保Y轴正确缩放
                            try {
                                if (this.chart && typeof this.chart.applyOptions === 'function') {
                                    this.chart.applyOptions({
                                        timeScale: {
                                            rightOffset: 0,
                                            barSpacing: 12,
                                            minBarSpacing: 0.5,
                                        },
                                    });

                                }
                            } catch (e) {

                            }
                        } else {

                        }
                    }
                }

            } catch (error) {


            }
        },

        // 增量更新K线数据（只更新最后一条或添加新的）
        updateIncrementalData(newKlineData, oldKlineData) {
            if (!this.chart || !newKlineData || newKlineData.length === 0) {
                return;
            }

            try {
                const isCandle = this.chartType === 'candle';
                const isArea = this.chartType === 'area' || this.chartType === 'line';
                
                // 获取最后一条数据
                const lastItem = newKlineData[newKlineData.length - 1];
                
                // 确保time是秒级时间戳（数字类型）
                let time;
                if (typeof lastItem.time === 'number') {
                    time = lastItem.time >= 10000000000 ? Math.floor(lastItem.time / 1000) : Math.floor(lastItem.time);
                } else if (typeof lastItem.time === 'string') {
                    // 如果是字符串，尝试转换为数字
                    const parsed = parseInt(lastItem.time);
                    time = parsed >= 10000000000 ? Math.floor(parsed / 1000) : Math.floor(parsed);
                } else {
                    return;
                }
                
                // 确保time是有效的数字
                if (isNaN(time) || time === 0) {
                    return;
                }
                
                if (isCandle && this.candlestickSeries) {
                    // 蜡烛图模式：需要open/high/low/close字段
                    // 检查数据是否包含完整的蜡烛图字段
                    if (lastItem.open !== undefined && lastItem.high !== undefined && 
                        lastItem.low !== undefined && lastItem.close !== undefined) {
                        const candleBar = {
                            time: time,
                            open: parseFloat(lastItem.open) || 0,
                            high: parseFloat(lastItem.high) || 0,
                            low: parseFloat(lastItem.low) || 0,
                            close: parseFloat(lastItem.close) || 0,
                        };
                        
                        this.candlestickSeries.update(candleBar);
                    }
                } else if (isArea && this.areaSeries) {
                    // 面积图模式：需要value字段
                    // 优先使用value字段，如果不存在则使用close字段
                    const value = lastItem.value !== undefined ? parseFloat(lastItem.value) : 
                                  lastItem.close !== undefined ? parseFloat(lastItem.close) : 0;
                    
                    const areaBar = {
                        time: time,
                        value: value,
                    };
                    
                    this.areaSeries.update(areaBar);
                }
            } catch (error) {

            }
        },

        toggleChartType() {
            if (!this.candlestickSeries || !this.areaSeries) return;
            this.isTimeChartMode = !this.isTimeChartMode;
            
            console.log('[Trade组件] 切换图表类型:', this.isTimeChartMode);
            if (this.isTimeChartMode) {
                this.candlestickSeries.setVisible(false);
                this.areaSeries.setVisible(true);
            } else {
                this.candlestickSeries.setVisible(true);
                this.areaSeries.setVisible(false);
            }
        },

        setInterval(interval) {
            this.interval = interval;
        },

        destroyChart() {
            if (this.chart) {
                this.chart.remove();
                this.chart = null;
                this.candlestickSeries = null;
                this.areaSeries = null;
            }
        }
    },

    watch: {
        klineData: {
            handler(newKlineData, oldKlineData) {
                // 只有在初始加载时（从空到有数据）或切换时间周期时才重新渲染全部数据
                // 增量更新也要处理
                if (newKlineData && newKlineData.length > 0) {
                    // 修复：明确判断是否为初始加载
                    const isInitialLoad = !oldKlineData || oldKlineData.length === 0 || !this.chart;
                    const isDataReset = oldKlineData && newKlineData.length < oldKlineData.length;
                    // 增量更新：数据长度相同且数组引用相同（只有元素变化）
                    const isIncremental = oldKlineData && 
                                         newKlineData.length === oldKlineData.length && 
                                         newKlineData === oldKlineData;

                    // 初始加载或数据重置时，重新渲染全部数据
                    if (isInitialLoad || isDataReset) {
                        if (this.chart && (this.candlestickSeries || this.areaSeries)) {
                            this.updateChartData();
                        } else if (!this.chart) {
                            this.$nextTick(() => {
                                this.init(this.idtemp, 'day', { value: 'zh' });
                            });
                        }
                    } else if (isIncremental) {
                        // 增量更新：只更新最后一条或添加新的K线
                        this.updateIncrementalData(newKlineData, oldKlineData);
                    } else {
                        // 数据长度变化但不是重置，也要全量渲染
                        if (this.chart && (this.candlestickSeries || this.areaSeries)) {
                            this.updateChartData();
                        }
                    }
                }
            },
            deep: true  // 改为true，开启深度监听，监听数组内部元素的变化
        },
        chartType(newType) {
            // 如果图表还没初始化，但有K线数据，先初始化图表
            if (!this.chart && this.klineData && this.klineData.length > 0) {
                console.log('[Trade组件] 图表未初始化，重新初始化');
                this.$nextTick(() => {
                    this.init(this.idtemp, 'day', { value: 'zh' });
                });
                return;
            }
            // 图表类型改变时，立即重新更新数据渲染
            if (this.candlestickSeries && this.areaSeries && this.klineData && this.klineData.length > 0) {
                console.log('[Trade组件] 更新图表数据');
                // 直接调用updateChartData，不使用nextTick以加快渲染速度
                this.updateChartData();
            } else {
                console.log('[Trade组件] series未初始化或无数据');
            }
        },
        
        timeInterval(newInterval, oldInterval) {
            // 时间周期改变时，重新获取数据
        }
    }
}
</script>

<style>
#trade-view {
    width: 100%;
    height: 600rpx;
    background-color: #ffffff !important;
    position: relative;
    z-index: 1;
}
</style>
